<template>
  <div id="blogs">
    <mxPane
      :back="isViewBlog"
      @on-back="isViewBlog = false"
      @on-refresh="isViewBlog = true"
      :class="{
        'pane-blog': !isViewBlog,
        'pane-blog-view': isViewBlog
      }"
      :title="isViewBlog ? title : '文章列表'"
    >
      <List item-layout="vertical" v-if="!isViewBlog">
        <ListItem v-for="blog in blogs" :key="blog.blogId">
          <ListItemMeta>
            <template slot="title">
              <div
                @click="handleViewBlog(blog)"
                style="cursor: pointer;"
                v-hightlight:[blog.blogTitle]="searchValue"
              >
                <!-- {{ blog.blogTitle }} -->
              </div>
            </template>
            <template slot="description">
              <div
                @click="handleViewBlog(blog)"
                style="cursor: pointer;"
              >
                {{ blog.blogContent | textSlice }}
              </div>
            </template>
          </ListItemMeta>
          <template slot="action">
            <li @click="like(blog.blogId)">
              <Icon type="ios-thumbs-up-outline" /> {{ blog.blogUp }}
            </li>
            <li><Icon type="ios-eye-outline" />{{ blog.blogViewnum }}</li>
            <li><Icon type="ios-text-outline" />{{ blog.remarkNum }}</li>
            <template v-if="blog.tagName">
              <Tag
                color="blue"
                v-for="(item, index) in blog.tagName.split(',')"
                :key="item + '-' + index"
                >{{ item }}</Tag>
            </template>
          </template>
          <template slot="extra">
            <Tooltip :content="blog.blogDatetime | formatDate" placement="left">
              {{ blog.blogDatetime | fromDate }}
            </Tooltip>
          </template>
        </ListItem>
        <Button @click="pageIndex++" :disabled="total === blogs.length" :loading="loading">查看更多</Button>
        
      </List>
      <router-view></router-view>
    </mxPane>
    <mxPane 
      :class="{
        'pane-filter': !isViewBlog,
        'pane-filter-none': isViewBlog
      }" 
      title="筛选"
    >
      <mxFilter @search="search" @click-tag="clickTag"></mxFilter>
      <!-- <message v-else :messages="messageList"></message> -->
    </mxPane>
  </div>
</template>

<script>
import mxPane from "_c/mx-pane/mx-pane.vue";
import mxFilter from "_c/mx-filter/mx-filter.vue";
import { like, getBlogByLike, getBlogByTagName } from "@/api/blog.js";
export default {
  name: "blogs",
  data() {
    return {
      pageIndex: 1,
      total: 0,
      blogs: [],
      // 是否点击文章列表进行查看
      isViewBlog: false,
      title: '',
      searchValue: '',
      loading: false,
      activeTagName: '',
    };
  },
  methods: {
    getBlogs() {
      this.loading = true
      getBlogByLike({ value: this.searchValue, index: this.pageIndex }).then(res => {
        this.loading = false
        if (res.status === 200 && res.data.code === 0) {
          const data = res.data.data;
          this.total = data.total;
          this.blogs.push(...data.content);
        } else {
          this.$Message.error("获取失败：" + res.data.msg || res);
        }
      })
    },
    handleViewBlog(blog) {
      this.isViewBlog = true;
      this.title = blog.blogTitle
      this.$router.push({ name: "view-blog", params: { id: blog.blogId, blog } });
    },
    like(id) {
      like({ id }).then(res => {
        if (res.status === 200 && res.data.code === 0) {
          this.blogs.forEach(item => {
            if (item.blogId === id) {
              item.blogUp += 1;
            }
          });
        }
      });
    },
    search(value) {
      this.pageIndex = 1
      this.blogs = []
      this.searchValue = value
      this.getBlogs();
    },
    clickTag(tagName) {
      this.activeTagName = tagName
      this.pageIndex = 1
      this.searchValue = ''
      this.blogs = []
    },
    getBlogByTagName() {
      this.loading = true
      getBlogByTagName({ tagName: this.activeTagName, index: this.pageIndex }).then(res => {
        this.loading = false
        if (res.status === 200 && res.data.code === 0) {
          const data = res.data.data;
          this.total = data.total;
          this.blogs.push(...data.content);
        } else {
          this.$Message.error("获取失败：" + res.data.msg || res);
        }
      })
    }
  },
  created() {
    this.getBlogs();
  },
  watch: {
    pageIndex() {
      if(!this.activeTagName) {
        this.getBlogs();
      } else {
        this.getBlogByTagName()
      }
    },
    activeTagName(val) {
      if(val) {
        this.getBlogByTagName()
      }
    }
  },
  components: {
    mxPane,
    mxFilter
  }
};
</script>

<style lang="less" scoped>
#blogs {
  display: flex;
  padding: 0 5%;
  justify-content: space-between;
  align-items: center;
  .pane-blog {
    width: 70%;
    height: 90%;
    transition: all .5s;
  }
  .pane-blog-view {
    position: relative;
    width: 100%;
    height: 90%;
    transition: all .5s;
    
    /deep/ .content {
      padding: 40px 130px;
    }
  }
  .pane-filter {
    width: 25%;
    height: 90%;
    transition: all .5s;
  }
  .pane-filter-none {
    width: 0;
    height: 90%;
    // display: none;
    transition: all .5s;
  }
}
</style>
